<!DOCTYPE html>

<html lang="zh">

<head>

<meta name="viewport" content="width=device-width" />

<title>这一刻</title>

<link rel="stylesheet" href="css/flipclock.css">

<style>

	body{

		margin: 20px auto;

		background: url('bg.png');

		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;

	}

	.your-clock{ margin: 0 auto; margin-top: 80px; clear: both; width: 460px; 	}

	.flip-clock-label{color: #FFF; }

	#logo{
		width: 100px;
		height: 100px;
		border-radius: 50%;
		border: rgb(196, 150, 218) 10px solid;
		box-shadow: 5px 5px 15px rgba(80,80,80,1);
		overflow: hidden;
		background-image: url('./logo.jpg');
		background-size: cover;
		margin-top: 100px;
		margin-bottom: 0;
	}

	#txt{
		font-size: 30px;
		font-weight: 600;
		color: #FFF;
		width: 100%;
		text-align: center;
		margin-top: 80px;
	}
	#dateDiv{
		color: #FFF;
		margin-top: 60px;
	}

</style>

</head>

<body>
	<div id="logo"></div>
	<div id="txt">Don't use hands to do things that can be done efficiently by the computer. </div>
	<div class="your-clock"></div>
	<div id="dateDiv"></div>	

	<script src="js/flipclock/jquery-1.9.1.min.js"></script>

	<script src="js/flipclock/libs/prefixfree.min.js"></script>

	<script src="js/flipclock/flipclock.min.js"></script>

	<script>
	$(function(){

		var today=new Date()
		var h=today.getHours()
		var m=today.getMinutes()
		var s=today.getSeconds()

		var clock = $('.your-clock').FlipClock(h*60*60+m*60+s+1, {

		});
		$("#dateDiv").text(today.toDateString("Y-m-d"));
	});

	</script>



</body>

</html>